<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Whiteboard</title>
  <link rel="stylesheet" href="whiteboard.css">
  <link rel="icon" type="image/png" href="icon/icon32.png">
  <link rel="icon" sizes="16x16" href="icon/icon16.png">
  <link rel="icon" sizes="32x32" href="icon/icon32.png">
  <link rel="icon" sizes="48x48" href="icon/icon48.png">
  <link rel="icon" sizes="128x128" href="icon/icon128.png">
</head>
<body>
  <div id="notification" class="notification success">
    <p id="notification-message" class="notification-message"></p>
  </div>
  <div id="confirm-dialog" class="modal-overlay">
    <div class="confirm-modal">
      <div class="confirm-header">
        <h3 class="confirm-title">Clear Whiteboard</h3>
      </div>
      <div class="confirm-body">
        <p id="confirm-message">Are you sure you want to clear the whiteboard? This action cannot be undone.</p>
      </div>
      <div class="confirm-footer">
        <button id="cancel-clear" class="modal-button secondary-button">Cancel</button>
        <button id="confirm-clear" class="modal-button primary-button danger-button">Clear</button>
      </div>
    </div>
  </div>
  <div id="toolbar">
    <button id="go-home-btn" class="button">Go Home</button>
    <button id="clear-btn">Clear</button>
    <!-- Add Text button will be appended by JS -->
  </div>
  <canvas id="whiteboard" width="900" height="600"></canvas>
  <script src="whiteboard.js"></script>
</body>
</html> 